<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="multipart/form-data; charset=UTF-8">
<title>用户注册页面</title>
<link type="text/css" rel="stylesheet" href="css/register.css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/register.js"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>  
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript">
   /* 上传 图片回显 */
   function preview(file){
	   var prevDiv=document.getElementById('photo');
	   if(file.files&&file.files[0]){
		   var reader=new FileReader(); //用来读取文件的类型
		   reader.onload=function(evt){ //处理读取的文件
			   prevDiv.innerHTML = '<img src="' + evt.target.result + '" style="width:120px;height:120px;" class="img-circle"/>';
		   }
               reader.readAsDataURL(file.files[0]); //读取图像文件  
   }else{
	   prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';   
   }
   }
</script>

<!-- 正则验证 -->
<!-- <script type="text/javascript">
   function checkFname(){
	   var v=$("#fname").val();
	   var fname2=$("#fname2");
 	   var reg = /^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/;   // 匹配昵称
 	   var chinaReg = /[\u4e00-\u9fa5]/g;   //匹配中文字符
       var len = v.replace(chinaReg, "ab").length;  //把中文字符转换为两个字母，以计算字符长度
       if(v==""){
           fname2.html("昵称不能为空，请输入昵称");
           return false;
       }else if(reg.test(v)==false){
           fname2.html("只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成");
           return false;
       } else if (len < 4 || len > 20) {
           fname2.html("1、长度为4－20个字符<br/>2、一个汉字占两个字符");
           return false;
       }else{
           fname2.html("昵称输入正确");
       }
       return true;
   }
</script> -->
</head>
<body>
	<div id="app"><!-- app start -->
		<form id="myform" role="form" class="form-horizontal">
		  <!-- <div class="form-group">
		     <div class="col-sm-3">
		        <label for="realName" class="control-label">用户 昵称:</label>
		        <input id="fname" type="text"
						class="form-control" size="24" name="uname" onblur="checkFname()" placeholder="用户昵称"/><span class='warn' id='DivFname'></span>
				<div id="fname2"></div>		
		     </div>
		  </div>
		  
		  <div class="form-group">
		    <div class="col-sm-3">
		     <label for="realName" class="control-label">真实名字:</label>
		     <input id="lname" type="text"
						class="form-control" size="24" name="realName" placeholder="真实名字"/><span class='warn' id='DivName'></span></td>
						<td><div id="lname2"></div>
		    </div>				
		  </div>
		  
		  <div class="form-group">
		   <div class="col-sm-3">
		     <label for="realName" class="control-label">密码:</label>  
		     <input id="pwd" type="password"
						class="form-control" size="26" name="password" placeholder="密码"/> <span class='warn' id='DivPwd'></span></td>
						<td><div id="pwd2"></div>
		   </div>  
		  </div>
		  
		   <div class="form-group">
		    <div class="col-sm-3">
		     <label for="realName" class="control-label">再次输入密码:</label>
		     <input id="repwd" type="password"
						class="form-control" size="26" placeholder="再次输入密码"/><span class='warn' id='DivRepwd'></span>
						<td><div id="repwd2"></div>
		    </div> 
		  </div>
		  
		   <div class="form-group">
		    <div class="col-sm-3">
		     <label for="realName" class="control-label">电子邮箱:</label>
		     <input id="repwd" type="password"
						class="form-control" size="26"  placeholder="电子邮箱"/><span class='warn' id='DivRepwd'></span>
						<td><div id="repwd2"></div>
		    </div> 
		  </div>
		  
		   <div class="form-group">
		    <div class="col-sm-3">
		     <label for="realName" class="control-label">手机:</label>
		     <input id="phone" class="form-control" type="text" name="phone"/><span></span></td>
					<td><div id="phone2"></div>
		    </div> 
		  </div> 
		  
		  <div class="form-group">
		    <div class="col-sm-3">
		     <label for="realName" class="control-label">身份证号:</label>
		     <input class="form-control" id="cardNumber" type="text" name="cardNumber" placeholder="身份证号"/><span></span></td>
					<td><div id="cardNumber2"></div>
		    </div> 
		  </div>
		  
		  <div class="form-group">
		    <div class="col-sm-3">
		          性别:
		     <input class="form-control" id="gen"
						style="border: 0px;" type="radio" name="sex" value="男" /> <img
						src="images/Male.gif" width="23" height="21" alt="alt" />男&nbsp;
						<input style="border: 0px;" type="radio" name="sex" value="女"
						class="form-control" /> <img src="images/Female.gif" width="23"
						height="21" alt="alt" />女
		    </div> 
		  </div>
		  
		  <div class="form-group">
		    <div class="col-sm-3">
		     <label for="realName" class="control-label">头像:</label>
		     <a href="javascript:;" class="file">选择文件 <input type="file" class="form-control"
								id="inputFile" onchange="preview(this)" name="photo2" placeholder="头像">
							</a>
		    </div> 
		  </div>
		  
		  <div class="form-group">
		    <div class="col-sm-3">
		     <label for="realName" class="control-label">出生日期:</label>
		     <input class="form-control" id="birthDay" type="text"
						name="birthDate" class="Wdate" onclick="WdatePicker()" name="birthDay" placeholder="出生日期"/>
					</td>
					<td><div id="birthDay2"></div>
		    </div> 
		  </div>
		  
		  <div class="form-group">
		    <div class="col-sm-3">
		     <input type="image" id="Button"
						style="border: 0px;" src="images/submit.gif"  v-on:click="sub()" alt="提交"/>
			</div>			
		  </div> -->
		  
		  
		 
			<table>
				<tr class="register_table_line">
					<td class="input_title">用户昵称：</td>
					<td class="input_content"><input id="fname" type="text"
						class="reg_text" size="24" name="uname" onblur="checkFname()"/><span class='warn' id='DivFname'></span></td>
					<td><div id="fname2"></div></td>	
				</tr>
				<tr class="register_table_line">
					<td class="input_title">真实名字：</td>
					<td class="input_content"><input id="lname" type="text"
						class="reg_text" size="24" name="realName"/><span class='warn' id='DivName'></span></td>
						<td><div id="lname2"></div></td>
				</tr>
				
				<tr class="register_table_line">
					<td class="input_title">密码：</td>
					<td class="input_content"><input id="pwd" type="password"
						class="reg_text" size="26" name="password"/> <span class='warn' id='DivPwd'></span></td>
						<td><div id="pwd2"></div></td>
				</tr>
				<tr class="register_table_line">
					<td class="input_title">再次输入密码：</td>
					<td class="input_content"><input id="repwd" type="password"
						class="reg_text" size="26" /><span class='warn' id='DivRepwd'></span>
						<td><div id="repwd2"></div></td>
					</td>
				</tr>
				<tr class="register_table_line">
					<td class="input_title">电子邮箱：</td>
					<td class="input_content"><input id="email" type="text"
						class="reg_text" size="24" name="email"/> <span class='warn' id='DivEmail'></span></td>
						<td><div id="email2"></div></td>
				</tr>
				<tr>
					<td>手机：</td>
					<td><input id="phone" type="text" name="phone"/><span></span></td>
					<td><div id="phone2"></div></td>
				</tr>
				<tr>
					<td>身份证号：</td>
					<td><input id="cardNumber" type="text" name="cardNumber"/><span></span></td>
					<td><div id="cardNumber2"></div></td>
				</tr>
				<tr class="register_table_line">
					<td class="input_title">性别：</td>
					<td class="input_content">
						 <input id="gen"
						style="border: 0px;" type="radio" name="sex" value="男" /> <img
						src="images/Male.gif" width="23" height="21" alt="alt" />男&nbsp;
						<input style="border: 0px;" type="radio" name="sex" value="女"
						class="input" /> <img src="images/Female.gif" width="23"
						height="21" alt="alt" />女
					</td>
				</tr>
				
				<tr>
				<span class="form-group">
					<label class="col-sm-2 control-label ">头像： </label>
					<span class="col-xs-3">
						<span id="photo">
						   
						</span>
						<span class="col-sm-10" style="margin-left: -5px;">
							<a href="javascript:;" class="file">选择文件 <input type="file"
								id="inputFile" onchange="preview(this)" name="photo2">
							</a>
						</span>
					</span>
				</span>
				</tr>

				<tr class="register_table_line">
					<td class="input_title">出生日期：</td>
					<td class="input_content"><input id="birthDay" type="text"
						name="birthDate" class="Wdate" onclick="WdatePicker()" name="birthDay"/>
					</td>
					<td><div id="birthDay2"></div></td>
				</tr>
				<tr class="register_table_line">
					<td class="input_title h35">&nbsp;</td>
					<td class="input_content h35"><input type="image" id="Button"
						style="border: 0px;" src="images/submit.gif"  v-on:click="sub()" alt="提交"/> <!-- <img
						src="images/reset.gif" style="cursor: pointer;" alt="重置" /> --> <!-- <input type="button" id="" value="提交" /> -->
						 <!-- <button v-on:click="sub()">提交</button></td> -->
				</tr>

			</table>
		  	
		</form>
	</div><!-- app end -->
</body>

<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript">
			
	var vm = new Vue({
		el : '#app',
		methods : {
			sub : function() {
				var uname = $("#fname").val();
				var realName = $("#lname").val();
				var password = $("#pwd").val();
				var repwd=$("#repwd").val();
				var email = $("#email").val();
				var phone = $("#phone").val();
				var cardNumber = $("#cardNumber").val();
				//头像
				/* var photo=$("#pho").val(); */
				var birthDay = $("#birthDay").val();
				//使用元素选择器，在使用属性过滤器name='sex',最后使用：checked选取被选中的元素
				var sex = $("input[name='sex']:checked").val();
				
				var formData=new FormData(document.getElementById("myform"));
		        /* //验证昵称 
				if (uname == "") {
					alert("昵称不能为空！");
					//$("#DivFname").html("名字不能为空");
		 	        return false;
		 	    }

				//验证真实名字l
				if (realName == "") {
					alert("名字不能为空！");
					//$("#DivFname").html("名字不能为空");
		 	        return false;
		 	    }
				
				//验证密码
				if(password==""){
					alert("密码不能为空！");
					return false;
				}
				//验证密码长度
				if(password.length<6){
					alert("密码必须等于或大于6位！");
					return false;
				}
				//验证重复密码
				if(password!=repwd){
					alert("两次输入的密码不一致！");
					return false;
				}
				
				//验证email
				if(email==""){
					alert("邮箱不能为空！");
				}
				if(email.indexOf("@")==-1){
					alert("邮箱格式不争确，必须包含@！");
				}
				if(email.indexOf(".")==-1){
					alert("邮箱格式不争确，必须包含.！");
				}
				
				//验证手机号
				if(phone.length<11){
					alert("手机号码应为11位！");
					return false;
				}
				//验证身份证号
				if(cardNumber.length<18){
					alert("身份证应为18位！");
					return false;
				} */
				
				$.ajax({
					type : 'post',
					url : 'register?birthDay2='+birthDay,
					data:formData,
					dataType:'json',
					/* async:false, */ //ajax请求改为同步，ajax程序块执行完毕后执行其他代码，解决回调方法取不到返回值问题
					cache:false,
					processData:false,
					contentType:false,
					success:function(result) {
						alert(result);
						alert("注册成功！");
					}
				})
			}
		}
	});
	
</script>

</html>